<style scoped lang="less">
</style>
<template>
	<iot-blk class="iot-video-modal" :class="{fullscreen:isFullScreen}" :moreType="0">
		<div class="opers flex end">
            <a href="javascript:;" :class="{active:screenNum==1}" @click="changeNum(1)">
                <i class="iconfont icon-one"></i>
            </a>
            <a href="javascript:;" :class="{active:screenNum==4}" @click="changeNum(4)">
                <i class="iconfont icon-four"></i>
            </a>
            <a href="javascript:;" :class="{active:screenNum==16}" @click="changeNum(16)">
                <i class="iconfont icon-sixteen"></i>
            </a>
            <a class="active" href="javascript:;" @click="fullScreen">
                <i class="iconfont icon-max"></i>
            </a>
            <a class="active ml-20" href="javascript:;" @click="closeAction">
                <i class="iconfont icon-close"></i>
            </a>
        </div>
        <div class="iot-video-list">
            <div class="iot-video-item"
                :class="{
                    's4':screenNum==4,
                    's16':screenNum==16
                }" 
                v-for="(item,index) in screenList"
                :key="'videoScreen'+index"
            >
                <VideoBlk :ref="'player'+index" :videoItem="item" @close="closeScreen(index)" @max="maxScreen(index)"></VideoBlk>
                <!-- <div class="iot-video-blk">
                    <div class="iot-video-hd">
                        <h4 class="flex-1">{{item.name}}</h4>
                        <a href="javascript:;">回放</a>
                        <a href="javascript:;" @click="maxScreen(index)">
                            <i class="iconfont icon-one"></i>
                        </a>
                        <a class="active ml-10" href="javascript:;" @click="closeScreen(index)">
                            <i class="iconfont icon-close"></i>
                        </a>
                    </div>
                    <div class="video-blk">
                        <videoPlayer :ref="'player'+index" crossOrigin="anonymous" :options="playerOptions[index]" @ready="playerReady" />
                    </div>
                </div> -->
            </div>
        </div>
	</iot-blk>
</template>
<script>
import { mapState } from 'vuex'
import VideoBlk from './VideoBlk'
export default {
	name: 'Today',
	components: {
        VideoBlk
	},
	props: {
		type: {
    		type: String,
			default: 'fireControl'
    	},
    	data: {
    		type: Object,
			default () {
				return {}
			}
    	},
	},
	computed: {
		...mapState([
			'scale'
		])
	},
	watch: {},
	data () {
		return {
			screenNum: 1,
			screenList: [],
            screenIndex: -1,
            playerOptions: [],
            isFullScreen: false
		}
	},
	methods: {
		fullScreen () {
            this.isFullScreen = !this.isFullScreen
        },
        closeAction () {
            this.$emit('close')
            this.isFullScreen = false
            this.screenList = []
            this.screenIndex = -1
            this.screenNum = 1
        },
        getLiveUrl (number) {
            return this.$get('/fireFightingIOT/device/getLiveStream',{number,protocol:'hls'})
        },
        async playVideo(videoItem) {
            // console.log(videoItem)
            // console.log('this.screenList',this.screenList)
            let isPlaying = this.screenList.find(item=>item.id==videoItem.id)
            if(isPlaying) return
            
            this.screenIndex++
            let index = this.screenIndex%this.screenNum
            this.$set(this.screenList, index,videoItem)
            this.$store.commit('setKitchenplayVideoList', this.screenList)
            this.$nextTick(() => {
                // console.log(this.$refs['player'+index])
                // this.$refs['player'+index][0].render()
            })
        },
        playerReady () {
        },
        closeScreen (index) {
            this.screenList.splice(index,1)
            this.$store.commit('setKitchenplayVideoList', this.screenList)
            this.screenIndex--
        },
        maxScreen (index) {
            this.screenIndex = 0
            let videoItem = this.screenList[index]
            this.screenList = [videoItem]
            this.screenIndex = 0
            this.screenNum = 1
        },
        changeNum (num) {
            let oldNum = this.screenNum
            if(num == oldNum) return
            this.screenNum = num
            let screenLen = this.screenList.length
            if(oldNum>num&& this.screenList.length>num){
                this.screenList = this.screenList.slice(screenLen-num)
                this.screenIndex = num-1
                this.$store.commit('setKitchenplayVideoList', this.screenList)
            }else{
                this.screenIndex = screenLen-1
            }
           
        }
	},
	created () {
	},
}
</script>